<template>
    <view class="index-home">
		<new-user-coupon :list="hotGoods" />
        <!-- 轮播 -->
        
        <!-- <bubble-tips top="280rpx" :discharge="isDischarge"></bubble-tips> 暂时去掉-->

        <view class="content">
            <!-- 导航入口 -->
            <view class="nav bg-white m-t-20" v-if="newNavList.length">
                <swiper :style="'height:' + navSwiperH + 'rpx;'" @change="swiperChange">
                    <swiper-item v-for="(items, index) in newNavList" :key="index">
                        <view class="nav-list flex flex-wrap">
                            <view
                                v-for="(item, index2) in items"
                                :key="index2"
                                class="nav-item m-t-30"
                                @tap="menuJump(item)"
                            >
                                <view class="flex-col col-center">
                                    <image class="nav-icon m-b-15" :src="item.image"></image>
                                    <view class="name xs">{{ item.name }}</view>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
                <view class="dots" v-if="newNavList.length > 1">
                    <view
                        v-for="(item, index) in newNavList"
                        :key="index"
                        :class="'dot ' + (index == currentSwiper ? 'active' : '')"
                    ></view>
                </view>
            </view>
            <!-- 中部广告 -->
            <ad-swipers
                :pid="32"
                height="186rpx"
                :is-swiper="false"
                padding="0"
                radius="20rpx"
            >
            </ad-swipers>
            <!-- 资讯 -->
            <router-link
                v-if="newsList.length"
                class=""
                :to="{ path: '/pages/news_list/news_list' }"
            >
                <view class="information bg-white flex m-t-20">
                    <image class="icon-toutiao" src="/static/images/icon_toutiao.png"></image>
                    <text class="gap-line"></text>
                    <view class="news flex-1 flex">
                        <view class="shade"></view>
                        <swiper
                            class="flex-1"
                            autoplay="true"
                            style="height: 76rpx"
                            vertical="true"
                            circular="true"
                            :interval="3000"
                        >
                            <swiper-item
                                v-for="(item, index) in newsList"
                                :key="index"
                                class="flex"
                            >
                                <view class="flex-none">
                                    <u-tag
                                        v-if="item.is_new"
                                        shape="circle"
                                        text="最新"
                                        size="mini"
                                        type="primary"
                                        mode="plain"
                                    />
                                </view>
                                <view class="text-swiper m-l-10 line-1">{{ item.title }}</view>
                            </swiper-item>
                        </swiper>
                    </view>
                    <u-icon name="arrow-right"></u-icon>
                </view>
            </router-link>
			
			<home-banner :activityArea="activityArea" :seckillGoods="seckillGoods"/>
            <!-- 活动专区 -->
            <!-- #ifdef MP-WEIXIN -->
            <view class="live m-t-20" v-if="appConfig.index_setting.live_room && liveList.length">
                <view class="live-header flex row-between">
                    <view class="xxl bold">直播间</view>
                    <router-link to="/bundle_b/pages/live_room/live_room">
                        <view class="sm">更多 <u-icon name="arrow-right"></u-icon> </view>
                    </router-link>
                </view>
                <view class="live-lists">
                    <scroll-view scroll-x="true">
                        <view class="inline">
                            <view class="flex p-l-20">
                                <view
                                    v-for="item in liveList"
                                    class="m-r-20"
                                    style="width: 286rpx"
                                    :key="item.id"
                                >
                                    <live-item :data="item"></live-item>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
            <!-- #endif -->
            <!-- 秒杀 -->
         <!--   <view class="seckill m-t-20" v-if="seckillGoods.length">
                <home-seckill :list="seckillGoods"></home-seckill>
            </view> -->

            <!-- 附近店铺 -->
            <!-- <view class="m-t-20" v-if="nearbyShop.length">
                <shop-recommend
                    type="nearby-shops"
                    title="生活圈"
                    :list="nearbyShop"
                    url="/bundle_b/pages/nearby_shops/nearby_shops"
                ></shop-recommend>
            </view> -->

            <view class="m-t-20" v-if="appConfig.index_setting.host_show && hotGoods.length">
                <active-area
                    :list="hotGoods"
                    type="hot"
                    title="热销榜单"
                    url="/pages/active_list/active_list?type=hot"
                ></active-area>
            </view>
            <view class="m-t-20" v-if="appConfig.index_setting.new_show && newGoods.length">
                <active-area
                    :list="newGoods"
                    type="new"
                    title="新品推荐"
                    url="/pages/active_list/active_list?type=new"
                ></active-area>
            </view>

            <!-- 种草社区  -->
            <view
                class="m-t-20"
                v-if="appConfig.index_setting.community_show && communityArticle.length"
            >
                <community-recommend
                    :list="communityArticle"
                    title="种草社区"
                    url="/pages/community/community"
                ></community-recommend>
            </view>

            <!-- 店铺 -->
            <view class="m-t-20" v-if="appConfig.index_setting.shop_show && shopLists.length">
                <shop-recommend
                    type="shop-recommends"
                    title="店铺推荐"
                    :list="shopLists"
                ></shop-recommend>
            </view>

            <view
                class="m-t-20"
                v-if="appConfig.index_setting.shop_show && shopRecommend.length"
                v-for="(item, index) in shopRecommend"
                :key="index"
            >
                <shop-item :item="item"></shop-item>
            </view>
        </view>
    </view>
</template>

<script>
import { arraySlice, menuJump } from '@/utils/tools'
import { mapGetters } from 'vuex'
export default {
    props: {
        navList: {
            type: Array,
            default: () => []
        },
		cateList: {
		    type: Array,
		    default: () => []
		},
        list: {
            type: Array,
            default: () => []
        },
        homeData: {
            type: Object,
            default: () => ({})
        },
        liveList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            newNavList: [],
            navSwiperH: '',
            currentSwiper: 0,
            isDischarge: false,
            goodsList: []
        }
    },
    mounted() {
        this.isDischarge = false
    },
    destroyed() {
        this.isDischarge = true
    },
    methods: {
        swiperChange(e) {
            console.log(e)
            this.currentSwiper = e.detail.current
        },
        menuJump(item) {
            menuJump(item)
        }
    },
    watch: {
        navList(val) {
            if (val.length <= 5) {
                this.navSwiperH = 200
            } else {
                this.navSwiperH = 374
            }
            this.newNavList = arraySlice(val)
        },
        list(val) {
            this.goodsList = val
        }
    },
    computed: {
        ...mapGetters(['appConfig']),
        newsList() {
            return this.homeData.headlines || []
        },
        nearbyShop() {
            return this.homeData.nearby_shops || []
        },
        hotGoods() {
            return this.homeData.hots || []
        },
        newGoods() {
            return this.homeData.news || []
        },
        communityArticle() {
            return this.homeData.community_article || []
        },
        activityList() {
            return this.homeData.activity_area || []
        },
        shopRecommend() {
            return this.homeData.shop_recommend || []
        },
        shopLists() {
            return this.homeData.shop_lists || []
        },
        seckillGoods() {
			let skill_list = this.homeData.seckill_goods || [];
		    const goods_lists = [];
			if(skill_list.length < 1 ) return [];
			
			for (let i = 0; i < skill_list.length; i ++) {
			
				goods_lists.push(skill_list[i].goods);
			}
            return goods_lists[0];
        },
        activityArea() {
            return this.homeData.activity_area || []
        }
    }
}
</script>

<style lang="scss" scoped>
.index-home {
    .content {
        padding: 0 20rpx ;
        .nav {
            position: relative;
            border-radius: 20rpx;

            .nav-item {
                width: 20%;

                .nav-icon {
                    width: 82rpx;
                    height: 82rpx;
                }
            }

            .dots {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 20rpx;
                display: flex;

                .dot {
                    width: 10rpx;
                    height: 6rpx;
                    border-radius: 6rpx;
                    margin-right: 10rpx;
                    background-color: rgba(255, 44, 60, 0.4);

                    &.active {
                        width: 20rpx;
                        background-color: $-color-primary;
                    }
                }
            }
        }

        .information {
            height: 76rpx;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
            padding: 0 20rpx;
            border-radius: 20rpx;

            .news {
                position: relative;

                .shade {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    z-index: 100;
                }
            }

            .icon-toutiao {
                width: 114rpx;
                height: 34rpx;
            }

            .gap-line {
                height: 28rpx;
                width: 1px;
                background-color: #dcdddc;
                margin: 0 30rpx;
            }
        }

        .title-iamge {
            width: 200rpx;
            height: 100rpx;
        }
        .activity-zone {
			background-color: rgb(255, 229, 227);
            background-size: 100% auto;
            padding: 15rpx;
            border-radius: 14rpx;
			.hd {
				display: flex;
				align-items: center;
			
				.title {
					font-size: 32rpx;
					font-weight: bold;
					margin-right: 12rpx;
				}
			
				image {
					width: 147rpx;
					height: 35rpx;
					margin-right: 20rpx;
				}
			
				.txt {
					padding: 0 10rpx;
					height: 36rpx;
					line-height: 36rpx;
					// background: linear-gradient(90deg, rgba(255, 168, 0, 1) 0%, rgba(255, 34, 15, 1) 100%);
					border-radius: 26rpx 0px 26rpx 0px;
					color: #fff;
					text-align: center;
					font-size: 22rpx;
					box-shadow: 3px 1px 1px 1px var(--view-minorColorT);
				}
			}
			.bd{
				
				display: flex;
				flex-wrap: wrap;
				margin-top: 28rpx;
				
			
			.item {
				border-radius: 14rpx;
				width: 321rpx;
				padding: 20rpx 16rpx;
			   .con-box {
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 130rpx;
					height: 100%;
			   
					.title {
						color: #282828;
						font-size: 28rpx;
					}
			   
					.con {
						color: #999999;
						font-size: 20rpx;
						margin-top: 2rpx;
					}
				
			   
					.go {
							display: flex;
							align-items: center;
							justify-content: center;
							margin-top: 10rpx;
							width: 112rpx;
							height: 36rpx;
							border-radius: 18rpx;
							color: #fff;
							font-size: 26rpx;
							font-weight: bold;
							font-style: italic;
				   
							image {
								width: 26rpx;
								height: 26rpx;
							}
					}
				}
			
		
			&:first-child .go {
				background: linear-gradient(90deg, rgba(75, 196, 255, 1) 0%, rgba(32, 126, 255, 1) 100%);
			}
			
			&:nth-child(2) .go {
				background: linear-gradient(90deg, rgba(255, 144, 67, 1) 0%, rgba(255, 83, 29, 1) 100%);
			}
			
			&:nth-child(3) .go {
				background: linear-gradient(90deg, rgba(150, 225, 135, 1) 0%, rgba(72, 206, 44, 1) 100%);
			}
			
			&:nth-child(4) .go {
				background: linear-gradient(90deg, rgba(255, 197, 96, 1) 0%, rgba(255, 156, 0, 1) 100%);
			}
			
			&:nth-child(2n) {
				margin-right: 0;
			}
			
			}
			
			}
		}
        .live {
            background: linear-gradient(
                180deg,
                rgba(255, 233, 233, 1) 0%,
                rgba(255, 255, 255, 1) 74%
            );
            padding-bottom: 28rpx;
            border-radius: 14rpx;
            .live-header {
                padding: 28rpx 24rpx;
            }
        }
    }
}
</style>
